<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID/PW 찾기</title>
<style type="text/css">
	#body{
		background-image: url(./image/pw_bg.jpg);
		background-repeat: no-repeat;
		background-position: center top;
		width:580px;
		height:300px;
		margin:0;
	}
	#form{
		background-image: url(./image/pw_bg2.gif);
		background-repeat: no-repeat;
		background-position: center bottom;
		height:172px;
		padding-top:15%;
		padding-left:20%;
		font-size:9pt;
		font-weight: bold;
	}
	span{
		text-decoration:underline;
		color:green;
		font-size:small;
	}
	table{
		font-size:small;
	}
	tr{
		height:30px;
	}
	th{
		background-color:#d6d4d4;
	}
	td{
		text-align:center;
	}
	input{
		margin:3px auto;
	}
</style>

<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		
		//이벤트 연결
		$('#searchId').submit(function(event){
			var name = $('#name').val();
			var phone = $('#phone').val();
			if(phone == null || phone == '' || name == null || name == ''){
				$('#search').html('<br>다시 검색해주세요.').css('color','red');
				return false;
			}
						
			//서버에서 데이터 전달하고 결과 데이터 요청
			$.getJSON('searchId.do',{name:name,phone:phone},function(data){
				var memberCommand = data.memberCommand;
				if(memberCommand == null){
					$('#search').html('다시 검색해주세요.').css('color','red');
				}
			});
		});
	}); 
	
	//ID/PW 자동 넣기
	function setCode(id,password){
		opener.document.loginForm.id.value=id;
		opener.document.loginForm.password.value=password;
		self.close();
	}
</script>
</head>
<body>
<div id="body">
	<div id="form">
	<form id="searchId" method="post"><br>
		이름 &nbsp;&nbsp;&nbsp;<input type="text" size="10" maxlength="10" name="name" id="name">&nbsp;&nbsp;
		<input type="submit" value="ID/PW 찾기"><br>
		연락처 <input type="text" size="25" maxlength="15" name="phone" id="phone" placeholder="-빼고 연락처를 입력하세요!">
	</form>
	
	<div id="search"><br>
	<table class="searchTable" >
		<tr>
			<th width="130">ID</th>
			<th width="130">PW</th>
		</tr>
		<c:if test="${!empty memberCommand}">
		<tr>
			<td>
				<a href='javascript:void(0);' onclick="setCode('${memberCommand.id}','${memberCommand.password}');">${memberCommand.id}</a>
			</td>
			<td>
				<a href='javascript:void(0);' onclick="setCode('${memberCommand.id}','${memberCommand.password}');">${memberCommand.password}</a>
			</td>
		</tr>
		</c:if>
	</table>
	</div>
	</div>
</div>

</body>
</html>